{# 继承登录页面父模板 #}
{% extends 'login/base_login.html' %}

{% block title %}
    学生登录 - 学生实习与就业管理系统
{% endblock %}

{% block user %}
    学生登录
{% endblock %}

{% block form %}
    <form action="{% url 'student:home' %}" method="post" id="form" >
        {% csrf_token %}
        <div class="form-group position-relative has-icon-left mb-4">
            <input type="text" class="form-control form-control-xl" name="stu_num" placeholder="学号">
            <div class="form-control-icon"><i class="bi bi-person"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input type="password" class="form-control form-control-xl" name="password" placeholder="输入密码">
            <div class="form-control-icon"><i class="bi bi-shield-lock"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input type="text" style="width: 70%;display: inline-block"  class="form-control form-control-xl" id="captcha" name="captcha" placeholder="请输入验证码">
            <a href="#" onclick="refreshCaptcha()">
                <img src="{% url 'student:generate_code' %}" alt="验证码" class="bsa-cursor-pointer" id="captcha-image"/>
            </a>
        </div>
        <div id="loginError" style="color: red;"></div>
        <button class="btn btn-primary btn-block btn-lg shadow-lg mt-5" type="submit">登录</button>
    </form>
{% endblock %}

{% block jump %}
<p class='text-gray-600'>还没有账户？<a href="{% url 'student:register' %}" class="font-bold">注册</a></p>
{% endblock %}


{# 登录表单验证 #}
{% block verify %}
<script>
    // 前端表单验证
    $('#form').formValidation({
        fields: {
            captcha: {
                validators: {
                    notEmpty: true,
                    remote: {
                        type: 'post',
                        url: '{% url 'student:verify_code' %}',
                        headers:{'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val() },  // 注意放到引号里面
                        data: {
                            type: 'save',
                        },
                        //请求失败的消息
                        message: "系统繁忙,请稍后再试",
                        delay: 1000
                    }
                }
            },
        }
    }).on('success.form.fv', function (e) {
        //阻止表单提交
        e.preventDefault();
        //得到表单对象
        var $form = $(e.target);
        let data = $form.serialize();
        //得到序列化数据
        $.ajax({
            url: "{% url 'student:login' %}",
            method: 'post',
            headers: {'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()},  // 注意放到引号里面
            data: data,
        }).then(function (res) {
            if (res.code === 200) {
                // 登录成功后跳转到登录页面
                window.location.href="{% url 'student:home' %}";
            } else {
                // 登录失败
                $form.formValidation('resetForm', true);
                if (res.code === 401){
                    $('#loginError').text('账号或密码不正确').show();
                    $.get("{% url 'student:generate_code' %}", function(data) {
                      // 向后端发送AJAX请求，获取新的验证码图像
                      $('#captcha-image').attr('src', "{% url 'student:generate_code' %}");
                    });
                } else if (res.code === 402) {
                    $('#loginError').text('登录超过五次！请5分钟后再试').show();
                    $.get("{% url 'student:generate_code' %}", function(data) {
                      // 向后端发送AJAX请求，获取新的验证码图像
                      $('#captcha-image').attr('src', "{% url 'student:generate_code' %}");
                    });
                }else if (res.code === 403) {
                    $('#loginError').text('审核中！').show();
                    $.get("{% url 'student:generate_code' %}", function(data) {
                      // 向后端发送AJAX请求，获取新的验证码图像
                      $('#captcha-image').attr('src', "{% url 'student:generate_code' %}");
                    });
                }


            }
        });
    });
</script>
{# 刷新验证码 #}
<script>
function refreshCaptcha() {
  $.get("{% url 'student:generate_code' %}", function(data) {
  // 向后端发送AJAX请求，获取新的验证码图像
  $('#captcha-image').attr('src', "{% url 'student:generate_code' %}");
  });
}
</script>
{% endblock %}



